<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>时钟</title>
    </head>
    <body>
        <div style="text-align: center;"><h1>简易时钟</h1></div>
        <div style="text-align: center;"><canvas id="one" width="800" height="500"></canvas></div>
        <div style="text-align: center; font-size: 35px;" id="date"></div>
        <script>
                var date=document.getElementById("date");
                var d=new Date()
                date.innerText=d.toDateString();
                var one=document.getElementById("one");
                var context=one.getContext("2d");
                function clock(){
                    context.clearRect(0,0,800,800);
                    var sec=new Date().getSeconds();
                    var min=new Date().getMinutes();
                    var hour=new Date().getHours();
                    var g1=context.createRadialGradient(400,250,0,400,250,200);
                    g1.addColorStop(0,"#fcfcfc");
                    g1.addColorStop(1,"#defdff");
                    context.lineWidth=2;
                    context.fillStyle=g1;
                    context.beginPath();
                    context.arc(400,250,200,0,360,false);
                    context.closePath();
                    context.fill();
                    context.stroke();
                    context.fillStyle='yellow';
                    context.beginPath();
                    context.arc(400,250,10,0,360,false);
                    context.closePath();
                    context.fill();
                    for(var i=0;i<12;i++){
                        context.save();
                        context.translate(400,250);
                        context.rotate(i*30*Math.PI/180);
                        context.beginPath();
                        context.moveTo(0,-200);
                        context.lineTo(0,-180);
                        context.closePath();
                        context.stroke();
                        context.restore();
                    }
                    for(var i=0;i<60;i++){
                        if(i%5!=0){
                            context.save();
                            context.strokeStyle="red";
                            context.translate(400,250);
                            context.rotate(i*6*Math.PI/180);
                            context.beginPath();
                            context.moveTo(0,-200);
                            context.lineTo(0,-190);
                            context.closePath();
                            context.stroke();
                            context.restore();
                        }
                    }
                    context.save();
                    context.fillStyle="black";
                        var hours=[3,4,5,6,7,8,9,10,11,12,1,2];
                        context.font="26px pxArial";
                        context.textAlign='center';
                        context.textBaseline='middle';
                        hours.forEach(function(number,i){
                            var rad=2*Math.PI/12*i;
                            var x=Math.cos(rad)*(200-30)+400;
                            var y=Math.sin(rad)*(200-30)+250;
                            context.fillText(number,x,y);
                        });
                        context.stroke();
                        context.restore();

                    context.save();
                    context.fillStyle="red";
                    context.translate(400,250);
                    context.rotate(sec*6*Math.PI/180);
                    context.beginPath();
                    context.moveTo(0,-170);
                    context.lineTo(-5,-30);
                    context.lineTo(0,-10);
                    context.lineTo(5,-30);
                    context.closePath();
                    context.fill();
                    context.restore();

                    context.save();
                    context.fillStyle="blue";
                    context.translate(400,250);
                    context.rotate(min*6*Math.PI/180);
                    context.beginPath();
                    context.moveTo(0,-150);
                    context.lineTo(-5,-30);
                    context.lineTo(0,-10);
                    context.lineTo(5,-30);
                    context.closePath();
                    context.fill();
                    context.restore();

                    context.save();
                    context.lineWidth=2;
                    context.fillStyle="black";
                    context.translate(400,250);
                    context.rotate(hour*30*Math.PI/180);
                    context.beginPath();
                    context.moveTo(0,-130);
                    context.lineTo(-8,-30);
                    context.lineTo(0,-10);
                    context.lineTo(8,-30);
                    context.closePath();
                    context.fill();
                    context.restore();
                }
                clock();
                setInterval(clock,1000);
        </script>
    </body>
</html>

<!-- <canvas id='canvas'></canvas> -->
<!-- <script type="application/javascript">
    let context=document.getElementById('canvas').getContext("2d");
    context.rect(30,30,100,100);
    context.strokeStyle='blue';
    context.fillStyle='red';
    context.shadowColor='green';
    context.shadowOffsetX=10;
    context.shadowOffsetY=10;
    context.lineWidth=3;
    context.fill();
    context.stroke();
</script> -->